<template>
	<view>
		<view class="p-10">
			<view class="card">
				<view class="cardTitle">地址信息
					<view class="flex cardExtra">
						<uv-checkbox-group v-model="type" shape="circle" @change="changeType">
							<uv-checkbox label="默认收货地址" :name="1" activeColor="red"></uv-checkbox>
						</uv-checkbox-group>
					</view>
				</view>
				<uv-form :model="formData" :rules="rules" ref="ruleForm">
					<uv-form-item label="收件人" prop="name">
						<uv-input v-model="formData.name" placeholder="收件人名字" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="手机号" prop="phone">
						<uv-input v-model="formData.phone" placeholder="手机号" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="所在地区" prop="prciar">
						<view :class="['input','ellipsis', formData.prciar ? 'default' : 'placeholder']"
							@click="openAddress">
							{{ formData.prciar ? formData.prciar : "省、市、区" }}
						</view>
					</uv-form-item>
					<uv-form-item label="详细地址" prop="address">
						<uv-textarea v-model="formData.address" placeholder="街道、小区、门牌号等" border="none">
						</uv-textarea>
					</uv-form-item>
				</uv-form>
			</view>
			<!-- Address -->
			<Address ref="addressRef" @setAddress="setAddress" />
		</view>
		<view class="btn">
			<uv-button text="提交" @click="submit" :loading="loading" shape="circle"
				:color="app.globalData.primaryColor"></uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	const app = getApp()
	const formData = reactive({
		code: '',
		name: '',
		phone: '',
		address: '',
		province: '',
		city: '',
		area: '',
		prciar: '',
		type: 0,
	})
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const addressRef = ref(null)
	const openAddress = () => {
		addressRef.value.open({
			province: formData.province,
			city: formData.city,
			area: formData.area
		})
	}
	const type = ref([])
	const changeType = (e) => {
		formData.type = type.value[0] || 0
	}
	onLoad(() => {
		const eventChannel = proxy.getOpenerEventChannel();
		// 监听事件，获取上一页面通过eventChannel传送到当前页面的数据
		eventChannel.on('setFormData', (value) => {
			Object.keys(formData).map((item) => {
				if (item == 'type') {
					type.value = [value[item]]
				}
				formData[item] = value[item]
			})
			formData.prciar = [value.province, value.city, value.area].toString()
		})
	})
	const nameLengthValidator = (_, val) => {
		return val?.length > 1
	}
	const isPhone = (_, val) => {
		return (/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val))
	}
	const rules = reactive({
		name: [{
				type: 'string',
				required: true,
				message: '请填写收件人名字',
				trigger: ['blur', 'change']
			},
			{
				message: '至少两个字符',
				validator: nameLengthValidator,
				trigger: ['blur', 'change']
			}
		],
		phone: [{
				required: true,
				message: '请填写手机号',
				trigger: ['blur', 'change']
			},
			{
				validator: isPhone,
				message: '手机号格式不正确',
				trigger: ['blur', 'change']
			},
		],
		prciar: [{
			required: true,
			message: '请选择所在地区',
			trigger: ['blur', 'change']
		}],
		address: [{
			required: true,
			message: '请填写详细地址',
			trigger: ['blur', 'change']
		}],
	})
	const setAddress = (val) => {
		if (val) {
			formData.province = val.value[0].name
			formData.city = val.value[1].name
			formData.area = val.value[2].name
			formData.prciar = `${val.value[0].name},${val.value[1].name},${val.value[2].name}`
		}
	}
	const ruleForm = ref(null)
	const loading = ref(false)
	const submit = () => {
		app.vibrate()
		ruleForm.value.validate().then(valid => {
			console.log('success', formData)
			loading.value = true
			app.post('api.auth.address/set', formData).then(res => {
				loading.value = false
				const eventChannel = proxy.getOpenerEventChannel();
				uni.navigateBack({
					success: () => eventChannel.emit('getData')
				})
			}).catch(errors => {
				loading.value = false
			})
		}).catch(errors => {
			loading.value = false
			console.log('error submit!!', errors)
		})
	}
</script>

<style lang="scss" scoped>
	.card {
		background-color: white;
		box-shadow: var(--nut-cell-box-shadow, 0 1px 7px 0 #edeef1);

		.cardTitle {
			font-size: medium;
			font-weight: 600;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cardExtra {
				color: #999;
				font-size: 12px;
			}
		}
	}

	::v-deep .uv-form {
		display: grid;
		background-color: transparent;

		.uv-form-item {
			background-color: white;
			border-radius: var(--nut-cell-border-radius, 6px);

			.uv-form-item__body {
				padding: 10px;

				.nut-input {
					padding: 0 0 0 5px !important;
					border: none !important;

					.uni-input-placeholder {
						color: rgb(192, 196, 204);
					}
				}

				.uv-form-item__body__left {
					flex: none !important;
					width: var(--nut-form-item-label-width, 90px) !important;
					margin-right: var(--nut-form-item-label-margin-right, 10px);
					font-size: var(--nut-form-item-label-font-size, 14px);
					font-weight: normal;
					text-align: var(--nut-form-item-label-text-align, left);
					word-wrap: break-word;
				}

				.uv-form-item__body__right {
					background-color: whitesmoke;
					border-radius: 10px;
					color: black;
					padding: 4px;
					min-height: 30px;

					.uv-input__content__field-wrapper__field {
						color: inherit !important;
					}

					.uv-textarea {
						background-color: transparent !important;
					}
				}
			}

			.uv-form-item__body__right__message {
				margin-left: var(--nut-form-item-label-width+25px, 90px+25px) !important;
			}
		}

		.uv-textarea {
			padding: 0 !important;
			margin: 0 5px;
		}
	}

	.placeholder {
		color: rgb(192, 196, 204);
	}

	.default {
		color: rgb(48, 49, 51);
	}

	.input {
		width: -webkit-fill-available;
		//height: 24px;
		min-height: 1.4em;
		margin: 0 4px;
		overflow: inherit;
		font-size: 14px;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ellipsis {
		text-overflow: ellipsis;
		white-space: normal;
		overflow: hidden;
	}

	::v-deep .nut-cell-group__wrap {
		gap: 10px;
		display: grid;
		background-color: transparent;

		.nut-form-item {
			border-radius: var(--nut-cell-border-radius, 6px);
		}
	}
</style>